<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>设备详情</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <script src="/statics/js/custom/lib.js?_V=1"></script>
    <link rel="stylesheet" href="/statics/css/station/detail.css?_v=1">
    <script type="text/javascript" src="/statics/plugins/echarts/echarts.min.js?v=1"></script>
    <style>
        .feedDay tbody tr td:nth-of-type(5) {
            width: 87px;
        }

        .disp {
            display: flex;
            justify-content: space-between;
        }

        .w100px {
            width: 140px !important;
        }

        .unit {
            color: #6e7079;
            font-size: 12px;
        }
    </style>
</head>

<body ng-app="">
<main class="lyear-layout-web">
    <main class="lyear-layout-container">
        <!--左侧导航-->
        <ng-include src="'/admin/common/sidebar.html'"></ng-include>
        <!--End 左侧导航-->
        <!--头部信息-->
        <ng-include src="'/admin/common/header.html'"></ng-include>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid p-t-55">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="card-title">设备详情</div>
                                    <a class="btn btn-primary toCmdCancel" target="_blank" id="">
                                        <i class="fa fa-podcast p-r-10"></i>通讯</a>
                                </header>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-id-card fs-16"></i>
                                        <div class="card-title p-l-10 fs-16 font-weight-bold" id="statoninfo"></div>
                                    </div>
                                </header>
                                <div class="list-group-all" style="height: 310px;margin-top: 10px;" id="baseinfo">
                                    <ul class="list-group">
                                        <li href="#!" class="border-top first-border">
                                            <span class="f-r" id="workshopName"></span>
                                            <b>所在车间</b>
                                        </li>
                                        <li href="#!" class="border-top">
                                            <span class="f-r mx_html" name="typeName"> </span>
                                            <b>设备类型</b>
                                        </li>
                                        <li href="#!" class="border-top">
                                            <span class="f-r times mx_html" name="lastResponseTime"></span>
                                            <b>最后通讯</b>
                                        </li>
                                        <li href="#!" class="border-top d-flex justify-content-between">
                                            <div>
                                                <b class="m-r-10">网络状态</b>
                                                <span class="f-r m-l-10" id="status"></span>
                                            </div>
                                            <div>
                                                <b class="m-r-10">运行状态</b>
                                                <span class="f-r label m-l-10" id="runStates"></span>
                                            </div>
                                        </li>
                                        <li href="#!" class="border-top">
                                            <b>工作模式</b>
                                            <span class="f-r label" id="mode"></span>
                                        </li>
                                        <li href="#!" class="border-top">
                                            <b>饲料报警</b>
                                            <span class="f-r label" id="bait_warning"></span>
                                        </li>
                                        <div id="tempValueStyle">
                                            <li href="#!" class="border-top d-flex justify-content-between pt-1 pb-0">
                                                <div class="tempBtn d-flex justify-content-center align-items-center">
                                                    <div class="tempBtnItem">
                                                        <a class="btn-gray-color" id="airTemp">室温</a>
                                                        <a class="btn-gray-color" id="waterTemp">水温</a>
                                                    </div>
                                                </div>
                                                <div class="tempValue">
                                                    <div id="yincang"><span id="waterTempValue"></span>℃</div>
                                                    <div id="yincang1"><span id="airTempValue"></span>℃</div>
                                                </div>
                                            </li>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-cubes fs-16"></i>
                                        <div class="card-title p-l-10 fs-16 font-weight-bold">养殖池详情</div>
                                    </div>
                                </header>
                                <div class="list-group-all" style="height:310px;margin-top: 10px;">
                                    <ul class="list-group" id="poolinfo">
                                        <li href="#!" class="border-top first-border">
                                            <span class="f-r">
                                                <span class="m-l-sm" title="养殖池规格" id="pool"></span>
                                                <span class="m-l-sm label p-1" title="养殖池水体" id="poolv"></span>
                                            </span>
                                            <b>养殖池规格</b>
                                        </li>
                                        <li href="#!" class="border-top">
                                            <span class="f-r mx_html" name="speciesName"></span>
                                            <b>养殖物种</b>
                                        </li>
                                        <li href="#!" class="border-top">
                                            <span class="f-r em-style mx_html" id="guge"></span>
                                            <b>物种概况</b>
                                        </li>
                                        <li href="#!" class="border-top">
                                            <span class="f-r em-style mx_html" id="plan"></span>
                                            <b>计划投喂</b>
                                        </li>
                                        <li href="#!" class="border-top">
                                            <span class="f-r em-style mx_html" id="feed"></span>
                                            <b>实际投喂</b>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-exchange fs-16"></i>
                                        <div class="card-title p-l-10 fs-16 font-weight-bold">投喂任务</div>
                                    </div>
                                </header>
                                <div class="list-group-all table-responsive" style="height: 310px;margin-top: 10px;">
                                    <ul class="list-group">
                                        <li href="#!" class="border-bottom">
                                            <span class="f-r" id="baitName"></span>
                                            <b>投喂标定</b>
                                        </li>
                                        <li href="#!" class="border-bottom">
                                            <b>任务的24小时分布</b>
                                        </li>
                                        <li href="#!" class="border-bottom disp" id="taskTime">
                                            <span class="label2 dnum00">0</span>
                                            <span class="label2 dnum01">1</span>
                                            <span class="label2 dnum02">2</span>
                                            <span class="label2 dnum03">3</span>
                                            <span class="label2 dnum04">4</span>
                                            <span class="label2 dnum05">5</span>
                                            <span class="label2 dnum06">6</span>
                                            <span class="label2 dnum07">7</span>
                                            <span class="label2 dnum08">8</span>
                                            <span class="label2 dnum09">9</span>
                                            <span class="label2 dnum10">10</span>
                                            <span class="label2 dnum11">11</span>
                                            <span class="label2 dnum12">12</span>
                                            <span class="label2 dnum13">13</span>
                                            <span class="label2 dnum14">14</span>
                                            <span class="label2 dnum15">15</span>
                                            <span class="label2 dnum16">16</span>
                                            <span class="label2 dnum17">17</span>
                                            <span class="label2 dnum18">18</span>
                                            <span class="label2 dnum19">19</span>
                                            <span class="label2 dnum20">20</span>
                                            <span class="label2 dnum21">21</span>
                                            <span class="label2 dnum22">22</span>
                                            <span class="label2 dnum23">23</span>
                                        </li>
                                    </ul>
                                    <table class="table table-hover feedtask table-bordered">
                                        <thead class="">
                                        <tr>
                                            <th style="text-align: center; vertical-align: middle; " data-field="name">
                                                <div class="th-inner">任务名称</div>
                                                <div class="fht-cell"></div>
                                            </th>
                                            <th style="text-align: center; vertical-align: middle;width: 260px;"
                                                data-field="week">
                                                <div class="th-inner">星期-天</div>
                                                <div class="fht-cell"></div>
                                            </th>
                                            <th style="text-align: center; vertical-align: middle; " data-field="time">
                                                <div class="th-inner">时间</div>
                                                <div class="fht-cell"></div>
                                            </th>
                                            <th style="text-align: center; vertical-align: middle; " data-field="type">
                                                <div class="th-inner">投喂模式</div>
                                                <div class="fht-cell"></div>
                                            </th>
                                            <th style="text-align: center; vertical-align: middle; "
                                                data-field="feedweight">
                                                <div class="th-inner">投喂量(g)</div>
                                                <div class="fht-cell"></div>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody id="taskList">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-unlock-alt fs-16"></i>
                                        <div class="card-title p-l-10 fs-16 font-weight-bold" id="stationStatus"></div>
                                    </div>
                                </header>
                                <div class="list-group-all" style="height: 310px;margin-top: 10px;">
                                    <ul class="list-group" id="statusinfo">
                                        <li href="#!" class="border-top first-border">
                                            <span class="f-r mx_html" name="name"></span>
                                            <b>养殖池</b>
                                        </li>
                                        <li href="#!" class="border-top">
                                            <span id="statusinfomode" class="f-r label"></span>
                                            <b>当前模式</b>
                                        </li>
                                        <li href="#!" class="border-top">
                                            <b>变更模式</b>
                                            <div class="f-r m-t-10">

                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body pb-0 pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-telegram fs-16"></i>
                                        <div class="card-title p-l-10 fs-16 font-weight-bold">自由投喂</div>
                                    </div>
                                </header>
                                <div class="list-group-all" id="replenishForm" style="height: 344px;">
                                    <ul class="list-group">
                                        <li href="#!"
                                            class="border-top first-border d-flex justify-content-between align-items-center">
                                            <b>指定速度</b>
                                            <span class="float-right w100px">
                                            <input type="hidden" id="freespeed2" value="0">
                                            <select id="freespeed" class="form-control text-right" disabled>
                                                <option value="normal">低速模式</option>
                                                <option value="high">高速模式</option>
                                            </select>
                                        </span>
                                        </li>
                                        <li href="#!"
                                            class="border-top d-flex justify-content-between align-items-center mx_validator">
                                            <b>指定时长(s)</b>
                                            <span class="float-right w100px">
                                            <input type="text" id="freesecs" nsecs="0" hsecs="0" name="time"
                                                   class="form-control text-right mx_required mx_custom" value="100"
                                                   mx_required_msg="指定时长不能为空" disabled>
                                        </span>
                                        </li>
                                        <li href="#!"
                                            class="border-top  d-flex justify-content-between align-items-center">
                                            <b>投喂重量(g)</b>
                                            <span class="float-right w100px">
                                            <input type="text" id="freeweight" class="form-control text-right"
                                                   value="" disabled>
                                        </span>
                                        </li>
                                        <li href="#!" class="border-top">
                                            <b>执行动作</b>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-list fs-16"></i>
                                        <div class="card-title p-l-10 fs-16 font-weight-bold">日投喂操作&nbsp;<span
                                                id="feedTime"></span>
                                        </div>
                                    </div>
                                    <div class="ibox-tools">
                                <span style="cursor:pointer;background:#1ab394;color:#fff;padding:5px 15px;border-radius: 0.15rem;font-size: 12px;"
                                      title="执行投喂">执行投喂</span>
                                        <span style="cursor:pointer;background:#ED5565;color:#fff;padding:5px 15px;border-radius: 0.15rem;font-size: 12px;"
                                              title="定时补投">定时补投</span>
                                        <span style="cursor:pointer;background:#663399;color:#fff;padding:5px 15px;border-radius: 0.15rem;font-size: 12px;"
                                              title="定量补投">定量补投</span>
                                    </div>
                                </header>
                                <div class="clearfix" style="display: none">
                                    <form class="form-inline form-space-b feedDaySearchForm" method="post">
                                        <div class="mx_search">
                                            <div class="form-group">
                                                <input class="form-control" autocomplete="off" type="text"
                                                       id="feedDayTime"
                                                       name="time">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="table-responsive" style="height: 310px;margin-top: 10px;">
                                    <table class="table table-hover feedDay" searchFormClass=".feedDaySearchForm"
                                           searchButtonClass=".feedDaySearchButton"
                                           resetButtonClass=".feedDayRestButton">

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-bar-chart fs-16"></i>
                                        <div class="card-title p-l-10 fs-16 font-weight-bold">30日投喂量趋势<span
                                                class="unit">（单位/g）</span>
                                        </div>
                                    </div>
                                </header>
                                <div class="clearfix p-b-10">
                                    <form class="form-inline form-space-b" method="post">
                                        <div class="mx_search p-t-10">
                                            <div class="form-group m-r-10">
                                                <input class="form-control width150 js-datetimepicker dates"
                                                       autocomplete="off"
                                                       data-date-format="yyyy-mm" type="text" id="30Time"
                                                       dateType="month" name="startTime" placeholder="选择月份">
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <a class="btn btn-primary m-r-10" id="30TimeSearch"><i
                                                        class="mdi mdi-magnify"></i> 搜索</a>
                                                <button class="btn btn-secondary" id="30TimeReset"><i
                                                        class="mdi mdi-delete"></i> 重置查询
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div id="feed_chart" style="width: 100%;height:380px;margin-top: -20px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-list fs-16"></i>
                                        <div class="card-title p-l-10 fs-16 font-weight-bold">月生产日志
                                        </div>
                                    </div>
                                </header>
                                <div class="clearfix p-b-10">
                                    <form class="form-inline form-space-b" id="searchForm" method="post">
                                        <div class="mx_search p-t-10">
                                            <div class="form-group m-r-10">
                                                <input class="form-control width150 js-datetimepicker dates"
                                                       autocomplete="off"
                                                       data-date-format="yyyy-mm-dd" type="text" id="startTime"
                                                       dateType="day" name="startTime" placeholder="开始时间">
                                                <span class="input-group-addon"
                                                      style="text-align: center;width: 30px;border: 0;"><i
                                                        class="mdi mdi-chevron-right"></i></span>
                                                <input class="form-control width150 js-datetimepicker dates"
                                                       autocomplete="off"
                                                       data-date-format="yyyy-mm-dd" type="text" id="endTime"
                                                       dateType="day" name="endTime" placeholder="结束时间">
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <a class="btn btn-primary m-r-10" id="searchButton"><i
                                                        class="mdi mdi-magnify"></i> 搜索</a>
                                                <button class="btn btn-secondary m-r-10" id="resetButton"><i
                                                        class="mdi mdi-delete"></i> 重置查询
                                                </button>
                                                <button class="btn btn-primary m-r-10" id="daochu"
                                                        onclick="export_excel()">
                                                    <i class="mdi mdi-export"></i> 导出
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-hover monthProducts" searchButtonClass="#searchButton"
                                           resetButtonClass="#resetButton" searchFormClass="#searchForm">
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-unlock-alt fs-16"></i>
                                        <div class="card-title p-l-10 fs-16 font-weight-bold">历史控制日志</div>
                                    </div>
                                </header>
                                <div class="clearfix p-b-10">
                                    <form class="form-inline form-space-b contrSearchForm" method="post">
                                        <div class="mx_search p-t-10">
                                            <div class="form-group m-r-10">
                                                <select class="form-control form-control-select" id="type" name="type">
                                                    <option value="">控制类型</option>
                                                    <option value="0">页面控制</option>
                                                    <option value="1">设备控制</option>
                                                </select>
                                            </div>
                                            <div class="form-group m-r-10">
                                                <select class="form-control form-control-select" id="operate"
                                                        name="operate">
                                                    <option value="">操作类型</option>
                                                    <option value="feed">自由投喂</option>
                                                    <option value="calibration">校准标定</option>
                                                    <option value="task">设置任务</option>
                                                    <option value="mode">切换模式</option>
                                                    <option value="firmware">固件更新</option>
                                                    <option value="reset">设备重启</option>
                                                    <option value="status">读取状态</option>
                                                    <option value="recon">对账召回</option>
                                                    <option value="ration">定量补料</option>
                                                    <option value="timing">持续补料</option>
                                                    <option value="stop">停止上行</option>
                                                    <option value="upgradeStart">固件更新</option>
                                                </select>
                                            </div>
                                            <div class="form-group m-r-10">
                                                <input class="form-control width150 js-datetimepicker dates" autocomplete="off"
                                                       data-date-format="yyyy-mm-dd hh:ii" type="text"
                                                       dateType="minute" name="startTime" placeholder="开始时间">
                                                <span class="input-group-addon" style="text-align: center;width: 30px;border: 0;">
                                                    <i class="mdi mdi-chevron-right"></i></span>
                                                <input class="form-control width150 js-datetimepicker dates" autocomplete="off"
                                                       data-date-format="yyyy-mm-dd hh:ii" type="text"
                                                       dateType="minute" name="endTime" placeholder="结束时间">
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <a class="btn btn-primary m-r-10 contrSearchButton"><i
                                                        class="mdi mdi-magnify"></i> 搜索</a>
                                                <button class="btn btn-secondary m-r-10 contrRestButton"><i
                                                        class="mdi mdi-delete"></i> 重置查询
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="table-responsive" style="min-height: 260px">
                                    <table class="table table-hover contr " searchButtonClass=".contrSearchButton"
                                           resetButtonClass=".contrRestButton" searchFormClass=".contrSearchForm">
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </main>
</main>
<!--End 页面主要内容-->
<script type="text/javascript" src="/statics/js/apis/station/station.js?"></script>
<script type="text/javascript" src="/statics/js/apis/station/station_control_record.js?"></script>
<script type="text/javascript" src="/statics/js/apis/station/station_produce_record.js?"></script>
<script type="text/javascript" src="/statics/js/custom/table.js?_v=1.1"></script>
<script type="text/javascript" src="/statics/js/library/station/sort_array.js"></script>
<script type="text/javascript" src="/statics/js/library/station/detail.js"></script>
</body>
</html>
